<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <span>
          <b class="u-f-16">代理商订单列表</b>
        </span>
      </div>

      <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
        <el-form-item label="是否拼团：">
          <el-checkbox-group v-model="queryForm.order_pt">
            <el-checkbox label="拼团" name="order_pt"></el-checkbox>
            <el-checkbox label="不拼团" name="order_pt"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="订单状态">
          <el-select v-model="queryForm.status" clearable>
            <el-option label="全部" value></el-option>
            <el-option label="待付款" value="1"></el-option>
            <el-option label="已付款" value="2"></el-option>
            <el-option label="已发货" value="3"></el-option>
            <el-option label="已收货" value="4"></el-option>
            <el-option label="已完成" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="queryForm.time_section"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="queryForm.keyword" placeholder="订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" class="u-mt-10" v-viewer>
        <el-table-column label="id" prop="id" width="50"></el-table-column>
        <el-table-column label="用户昵称" prop="nick_name"></el-table-column>
        <el-table-column label="发货方" prop="send_str"></el-table-column>
        <el-table-column label="订单编号" prop="order_sn"></el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_status==1" type="info">待付款</el-tag>
            <el-tag v-if="scope.row.order_status==2" type="success">已付款</el-tag>
            <el-tag v-if="scope.row.order_status==3">已发货</el-tag>
            <el-tag v-if="scope.row.order_status==4" type="warning">已收货</el-tag>
            <el-tag v-if="scope.row.order_status==5" type="danger">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="退款状态" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.out_handle_status==0" type="info">未申请</el-tag>
            <el-tag v-if="scope.row.out_handle_status==1" type="warning">未处理</el-tag>
            <el-tag v-if="scope.row.out_handle_status==2" type="success">已处理</el-tag>           
          </template>
        </el-table-column>
        <el-table-column label="是否拼团" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.goods_type>0" type="success">拼团</el-tag>
            <el-tag v-else type="info">不拼团</el-tag>
            <br />
          </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="order_total"></el-table-column>
        <el-table-column label="添加日期" prop="create_date" sortable></el-table-column>

        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="handleRoute(scope.row.id,'orderDetail')"
                  v-if="hasPerm('orderDetail')"
                >
                  <el-button size="mini" type="text">详情</el-button>
                </el-dropdown-item>

                <el-dropdown-item
                  @click.native="confirmTake(scope.row.id)"
                  v-if="scope.row.order_status==3"
                >
                  <el-button size="mini" type="text">确认收货</el-button>
                </el-dropdown-item>

                <!-- <el-dropdown-item
                  @click.native="handleDelete(scope.row.id)"
                  v-if="hasPerm('orderDelbtn')"
                >
                  <el-button size="mini" type="text">删除</el-button>
                </el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="u-mt-20 u-text-center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import commonPage from "@/mixins/common-page";
export default {
  mixins: [commonPage],
  data() {
    return {
      apiName: "order",
      queryForm: {
        agency_id:'',
        time_section: "", //下单时间区间
        order_pt: [], //是否是拼团订单
        status: "",
        keyword: ""
      }
    };
  },
  methods: {
    confirmTake(id) {
      let self = this;
      self.$api[self.apiName].confirmTake(id).then(response => {
        if (response.code == 1) {
          self.onLoad();
        }
      });
    }
  },
   created() {
    if (this.$route.params.id) {
      this.queryForm.agency_id = this.$route.params.id;
    }
  }
};
</script>
